<template>
	<view class="safe-bottom-distance form-container">
		<u-form :model="formData" ref="formRef" labelWidth='200rpx'>
			<u-form-item label="关系类型">
				<view class="flex-box">
					<view class="flex-max">
						<u-input v-model="detail.type" disabled   @click="onShowSelectList('type')"/>
					</view>
					<u-icon @click="onDelete('type')" v-if="detail.type" name="close-circle-fill"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="姓名" prop="name">
				<u-input v-model="formData.name" clearable/>
			</u-form-item>
			<u-form-item label="性别" prop="sex">
				<u-radio-group v-model="formData.sex">
					<u-radio :name="1">男</u-radio>
					<u-radio :name="2">女</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="手机号" prop="phone">
				<u-input v-model="formData.phone" clearable/>
			</u-form-item>
			<u-form-item label="座机号" prop="telphone">
				<u-input v-model="formData.telphone" clearable/>
			</u-form-item>
			<u-form-item label="现居住地址" prop="address">
				<u-input v-model="formData.address" clearable/>
			</u-form-item>
			<u-form-item label="单位名称" prop="company">
				<u-input v-model="formData.company" clearable/>
			</u-form-item>
			<u-form-item label="单位电话" prop="companyPhone">
				<u-input v-model="formData.companyPhone" clearable/>
			</u-form-item>
			<u-form-item label="单位地址" prop="companyAddress">
				<u-input v-model="formData.companyAddress" clearable/>
			</u-form-item>
		</u-form>


		<view class="submit-btn">
			<u-button type="success" @click="submit"> 提 交 </u-button>
		</view>
	</view>
	<u-picker v-model="showSelectList" :range="selectList" range-key="name" mode="selector" @confirm="confirmSelect"></u-picker>

</template>

<script setup>
	import {reactive,ref,unref} from "vue"
	import {onLoad,onReady} from "@dcloudio/uni-app"
	import {bindingBean} from "@/utils"
	import addressApi from "@/api/address"
	import personnelApi from "@/api/personnel"
	const detailList = {
		type:[
		   {id:1,name:"配偶"},
		   {id:2,name:"儿子"},
		   {id:3,name:"女儿"},
		   {id:4,name:"儿媳妇"},
		   {id:5,name:"女婿"},
		   {id:6,name:"孙子"},
		   {id:7,name:"孙女"},
		   {id:8,name:"孙媳妇"},
		   {id:9,name:"孙女婿"},
		   {id:10,name:"亲戚"},
		   {id:11,name:"同事"},
		   {id:12,name:"邻居"},
		   {id:13,name:"朋友"}
		],
	}
	const detail = reactive({
		type:"",
	})
	const selectList = ref()
	const showSelectList = ref(false)
	const formRef = ref()
	const formData = reactive({
		id:"",
		userId:"",
		type:"",
		name:"",
		sex:"",
		phone:"",
		telphone:"",
		address:"",
		company:"",
		companyPhone:"",
		companyAddress:""
	})
	const rules = {
		type:[
			{required:true,message:"请选择类型",trigger:"change"}
		],
		name:[
			{required:true,message:"请填写姓名",trigger:"blur"}
		],
		phone:[
			{required:true,message:"请填写手机号",trigger:"blur"},
			{pattern:/^1(3|4|5|6|7|8|9)\d{9}$/,message:"手机号格式错误",trigger:"blur"},
		]
	}
	// 选择框打开的时候零时保存属性
	let prop = ""
	// 打开选择弹框
	const onShowSelectList = async (val)=>{
		prop = val
		selectList.value = detailList[val]
		showSelectList.value = true
	}
	// 确认选择
	const confirmSelect = (index)=>{
		const res = selectList.value[index]
		formData[prop] = res.id
		detail[prop] = res.name
	}
	// 删除
	const onDelete = (prop)=>{
		detail[prop] = ''
		formData[prop] = ""
	}
	// 获取地址
	const getData = async () => {
		 let {data} = await personnelApi.getPersonFamily({userId:formData.userId,id:formData.id})
		 detail.type= detailList.type.find(item=>item.id==data.type)?.name
		 bindingBean(formData,data)
	}
	const submit = async () => {
		if(!await formRef.value.validate()) return
		await uni.showModal({
			title:"提示",
			content:"确定提交？"
		})
		if(formData.id){
		    await personnelApi.updatePersonFamily(formData)
		}else{
		  await personnelApi.addPersonFamily(formData)
		}
		await uni.showToast({
			icon:"success",
			title:"提交成功",
			mask:true
		})
		uni.navigateBack({delta:1})
		uni.$emit("getRelationList")
	}
	onLoad(({userId,id}) => {
		formData.userId = userId
		formData.id = id
		if(id) getData()
	})
	onReady(() => {
		formRef.value.setRules(rules);
	})
</script>

<style lang="scss" scoped>
	.form-container {
		padding: 20rpx;
		.flex-box{
			display: flex;
			:deep(.uicon-close-circle-fill){
				font-size:35rpx !important;
				color: #b7b7b7;
			}
			.flex-max{
				flex: 1;
			}
		}
		.submit-btn {
			width: 96vw;
			margin: 30rpx auto 20rpx;

		}
	}
</style>
